<template>
  <div class="full-page">
    <fullPageCom ref="fullpage">
      <!-- Hero Section -->
      <swiper
        :loop="true"
        v-scrollMooth
        class="mySwiper fullpage-slide h-full justify-center">
        <swiper-slide v-for="(item, index) in introduceData" :key="index">
          <div class="relative h-full section py-12 relative banner-box">
            <img
              :src="item.img"
              class="w-full h-full object-cover absolute z-[-1] top-0 left-0" />
            <!-- <div class="absolute inset-0 bg-gradient-to-r"></div> -->
            <div class="absolute left-[10%] top-[220px] max-w-7xl sm:py-32">
              <div
                class="text-4xl text-white sm:text-5xl lg:text-6xl flex flex-col gap-1 sm:gap-4">
                <span>
                  {{ item.engName }}
                </span>
                <span class="text-2xl sm:text-5xl lg:text-6xl">
                  {{ item.title }}
                </span>
              </div>
              <p class="mt-[18px] sm:mt-[34px] text-xl text-white max-w-3xl">
                {{ item.desc }}
              </p>
            </div>
            <div
              class="flex flex-col absolute right-[50%] bottom-0 translate-x-1/2">
              <div
                class="arrow-bg sm:w-[21rem] sm:h-[106px] w-[177px] h-[56px] flex items-center justify-center">
                <div
                  class="flex flex-col items-center justify-center arrow-box">
                  <img
                    src="@/assets/home-arrow.png"
                    alt=""
                    class="sm:w-[2.62rem] w-[1.25rem] object-cover" />
                  <span class="text-white text-[12px] sm:text-[16px] mt-[4px]">
                    Scroll Loading
                  </span>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <!-- 公司简介 -->
      <div
        v-scrollMooth
        class="fullpage-slide sm:py-12 py-4 px-4 sm:px-6 lg:px-40 advertisment-video-box">
        <div class="mx-auto w-full">
          <div class="lg:text-left">
            <h5 class="text-xl sm:text-5xl font-extrabold text-gray-900">
              CHIYAN VIDEO
            </h5>
            <p class="mt-4 max-w-2xl text-base sm:text-4xl text-gray-500">
              炽焰视频
            </p>
          </div>
        </div>
        <div class="flex flex-row gap-10 mt-8 justify-between video-box">
          <video class="w-full sm:w-[60%] self-start rounded-lg" controls>
            <source src="@/assets/1.mp4" type="video/mp4" />
          </video>
          <!-- 公司简介 -->
          <div
            class="bg-teal-50 flex flex-col items-center max-h-[80%] sm:w-[30%] w-full rounded-lg py-4">
            <div class="mx-auto w-full sm:pt-31 px-4">
              <div class="text-center">
                <h5 class="text-xl sm:text-5xl font-extrabold text-gray-900">
                  {{ company.engName }}
                </h5>
                <p class="mt-4 max-w-2xl text-base sm:text-4xl text-gray-500">
                  {{ company.title }}
                </p>
              </div>
              <div class="text-xl text-gray-500 mt-4">
                <span>{{ company.desc }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 物业 -->
      <div
        v-scrollMooth
        class="py-12 bg-blue-200 flex flex-col fullpage-slide h-full">
        <div class="mx-auto w-full sm:pt-31 px-4 sm:px-6 lg:px-60">
          <div class="lg:text-left">
            <h5 class="text-xl sm:text-5xl font-extrabold text-gray-900">
              {{ property.engName }}
            </h5>
            <p class="sm:mt-4 max-w-2xl text-base sm:text-4xl text-gray-500">
              {{ property.title }}
            </p>
          </div>
          <swiper
            :slides-per-view="2"
            :space-between="20"
            :breakpoints="breakpoints"
            :grid="grid"
            :scrollbar="{
              draggable: true,
              dragClass: 'custom-draggable-class',
              horizontalClass: 'custom-horizontal-class',
            }"
            :modules="[Scrollbar, Grid]"
            class="mySwiper sm:pb-14 pb-[30px] sm:mt-[46px] mt-[16px]">
            <swiper-slide v-for="(item, index) in property.list" :key="index">
              <div class="flex flex-col bg-white h-full">
                <div class="active-box">
                  <img
                    :src="item.img"
                    alt=""
                    class="w-full md:min-h-[257px] lg:max-h-[200px] min-h-[121px] object-cover object-top active-img" />
                </div>
                <div class="sm:p-4 p-2 flex flex-col">
                  <span class="sm:text-xl text-sm text-blue-800 truncate">
                    {{ item.name }}
                  </span>
                  <p
                    class="sm:text-base text-xs text-stone-500 sm:mt-3 mt-2 text-ellipsis-clamp">
                    {{ item.desc }}
                  </p>
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <!-- 活动 -->
      <div
        v-scrollMooth
        class="py-12 bg-blue-200 flex flex-col fullpage-slide h-full">
        <div class="mx-auto w-full px-4 sm:px-6 lg:px-60">
          <div class="lg:text-left">
            <h5 class="text-xl sm:text-5xl font-extrabold text-gray-900">
              {{ activitys.engName }}
            </h5>
            <p class="sm:mt-4 max-w-2xl text-base sm:text-4xl text-gray-500">
              {{ activitys.title }}
            </p>
          </div>
          <swiper
            :slides-per-view="2"
            :space-between="20"
            :breakpoints="breakpoints"
            :grid="grid"
            :scrollbar="{
              draggable: true,
              dragClass: 'custom-draggable-class',
              horizontalClass: 'custom-horizontal-class',
            }"
            :modules="[Scrollbar, Grid]"
            class="mySwiper sm:pb-14 pb-[30px] sm:mt-[46px] mt-[16px]">
            <swiper-slide v-for="(item, index) in activitys.list" :key="index">
              <div class="flex flex-col bg-white">
                <div class="active-box">
                  <img
                    :src="item.img"
                    alt=""
                    class="w-full md:min-h-[257px] lg:max-h-[260px] min-h-[121px] object-cover object-top active-img" />
                </div>
                <div class="sm:p-4 p-2 flex flex-col">
                  <span class="sm:text-xl text-sm text-blue-800 truncate">
                    {{ item.subTitle }}
                  </span>
                  <p
                    class="sm:text-base text-xs text-stone-600 sm:mt-3 mt-2 text-ellipsis-clamp">
                    {{ item.desc }}
                  </p>
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <!-- 服务预览 -->
      <div
        v-scrollMooth
        class="bg-gray-50 h-full flex flex-col fullpage-slide justify-between">
        <div class="max-w-7xl mx-auto px-4 py-10 sm:px-6 lg:px-8">
          <span class="text-3xl sm:text-5xl font-extrabold text-gray-900">
            4346</span
          >
        </div>
        <Footer />
      </div>
    </fullPageCom>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";

import {
  CodeBracketIcon,
  CpuChipIcon,
  CloudIcon,
} from "@heroicons/vue/24/outline";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Scrollbar, Grid } from "swiper/modules";
import fullPageCom from "@/components/fullPageCom/index.vue";
import Footer from "@/components/Footer.vue";
// 导入 Grid 模块的 CSS
import "swiper/css/grid";
import img1 from "@/assets/1.jpg";
import img2 from "@/assets/2.jpg";
import img3 from "@/assets/3.jpg";

const breakpoints = ref({
  768: {
    slidesPerView: 2,
    spaceBetween: 50,
  },
  1024: {
    slidesPerView: 3,
    spaceBetween: 50,
    grid: {
      rows: 2,
      fill: "row",
    },
  },
});
const grid = ref({
  rows: 3,
  fill: "row",
});

const introduceData = [
  {
    title: "炽焰运动",
    engName: "CHIYAN SPORTS",
    img: img3,
    desc: "炽焰运动是一家专注于为体育赛事提供全方位服务的公司",
  },
  {
    title: "我们的优势",
    engName: "OUR ADVANTAGES",
    img: img3,
    desc: "炽焰运动是一家专注于为体育赛事提供全方位服务的公司",
  },
];
const services = [
  {
    title: "网站开发",
    description: "专业的网站设计与开发服务，打造现代化、响应式的企业网站。",
    icon: CodeBracketIcon,
  },
  {
    title: "系统集成",
    description: "为企业提供系统集成解决方案，实现业务流程的数字化和自动化。",
    icon: CpuChipIcon,
  },
  {
    title: "云服务",
    description: "提供云服务器部署、运维和管理服务，确保系统稳定运行。",
    icon: CloudIcon,
  },
];
// 物业
const property = {
  title: "炽焰运动入驻物业",
  engName: " PROPERTY",
  list: [
    {
      name: "物业1",
      path: "/activity1",
      img: img2,
      subTitle: "xx物业",
      desc: "通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "物业2",
      path: "/activity1",
      img: img1,
      subTitle: "小蓝星幼儿园物业",
      desc: "通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "物业3",
      path: "/activity1",
      img: img2,
      subTitle: "小蓝星幼儿园物业",
      desc: "通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "物业4",
      path: "/activity1",
      img: img2,
      subTitle: "小蓝星幼儿园物业",
      desc: "通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "物业5",
      path: "/activity1",
      img: img2,
      subTitle: "小蓝星幼儿园物业",
      desc: "通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "物业6",
      path: "/activity1",
      img: img2,
      subTitle: "小蓝星幼儿园物业",
      desc: "通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "物业7",
      path: "/activity1",
      img: img2,
      subTitle: "小蓝星幼儿园物业",
      desc: "通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "物业8",
      path: "/activity1",
      img: img2,
      subTitle: "小蓝星幼儿园物业",
      desc: "通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
  ],
};
const activitys = {
  title: "炽焰运动最新动态(实时新闻)",
  engName: "ACTIVITY",
  list: [
    {
      name: "赛事活动1",
      path: "/activity1",
      img: img1,
      subTitle: "小蓝星幼儿园主题活动",
      desc: " 通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "赛事活动2",
      path: "/activity1",
      img: img1,
      subTitle: "小蓝星幼儿园主题活动",
      desc: " 通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "赛事活动3",
      path: "/activity1",
      img: img2,
      subTitle: "小蓝星幼儿园主题活动",
      desc: " 通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "赛事活动3",
      path: "/activity1",
      img: img2,
      subTitle: "小蓝星幼儿园主题活动",
      desc: " 通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "赛事活动3",
      path: "/activity1",
      img: img2,
      subTitle: "小蓝星幼儿园主题活动",
      desc: " 通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "赛事活动3",
      path: "/activity1",
      img: img2,
      subTitle: "小蓝星幼儿园主题活动",
      desc: " 通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
    {
      name: "赛事活动3",
      path: "/activity1",
      img: img2,
      subTitle: "小蓝星幼儿园主题活动",
      desc: " 通过发展与推广幼儿篮球，加快深化体教融合发展，为推动青少年文化学习和体育锻炼协调发展积累经验。同时为展示体教融合和幼儿篮球发展带来的成果，小篮星幼儿篮球花会因此诞生",
    },
  ],
};
const company = {
  title: "公司简介",
  engName: "COMPANY",
  img: img2,
  desc: "炽焰运动是一家专注于为体育赛事提供全方位服务的公司",
};

const realRef = ref();
// onMounted(() => {
//   window.addEventListener("resize", () => {
//     console.log("realRef", realRef.value.updateOnWindowResize );
//     realRef.value?.updateOnWindowResize()
//   });
// });
</script>

<style scoped>
/* 组件样式 */
.fullpage-slide {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  color: white;
  position: relative;
}
/* .fullpage-slide 除了第一个元素 */
.fullpage-slide:not(:first-child) {
  padding-top: 100px;
}
.arrow-bg {
  background: url("@/assets/home-arrow-bg.png") no-repeat;
  background-position: 100% 100%;
  background-size: cover;
}
.arrow-box {
  animation: upDown 1s ease-in-out infinite;
}
@keyframes upDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

.banner-box {
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("@/assets/banner-mask.png") no-repeat center center;
    background-size: cover;
    filter: blur(10px);
    z-index: 0;
  }
}
.active-box {
  overflow: hidden;

  & > .active-img:hover {
    transform: scale(1.1);
  }
}
.advertisment-video-box {
  background: url("@/assets/activity-bg.jpg") no-repeat;
  background-position: 100% 100%;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
.video-box {
  /* width: 10%;
  height: 80%; */
}
@media screen and (max-width: 768px) {
  .fullpage-slide:not(:first-child) {
    padding-top: 60px;
  }
  .video-box {
    flex-direction: column;
    justify-content: flex-start;
  }
}
/* Grid 布局样式 */
.swiper-grid-column .swiper-slide {
  height: calc((100% - 30px) / 2);
  box-sizing: border-box;
}

.swiper-grid-column .swiper-slide:nth-child(4n) {
  height: calc((100% - 30px) / 2);
}
</style>
